import React, { createElement, forwardRef } from 'react';
import './index.scss';

export interface EnforcementManagementProps {
  /**
   * 图片路径
   */
  imageSrc?: string;

  /**
   * 标签文字
   */
  label?: string;
  labelSen?:string,
  /**
   * 标签文字宽度
   */
  labelWidth?: number;

  /**
   * 标签文字高度
   */
  labelHeight?: number;

  /**
   * 标签文字大小
   */
  labelFontSize?: number;

  /**
   * 标签文字颜色
   */
  labelColor?: string;
  /**
   * 数字
   */
  count?: number;
  /**
   * 数字体大小
   */
  countFontSize?: number;

  /**
   * 数字体颜色
   */
  countColor?: string;

  onClick?: () => void;

  /**
   * 自定义样式
   */
  style?: React.CSSProperties;

  /**
   * 自定义类名
   */
  className?: string;

  // 低代码平台相关属性（不会传递到DOM）
  __designMode?: string;
  componentId?: string;
  _componentName?: string;
  forwardRef?: any;
}

const EnforcementManagement = forwardRef<HTMLDivElement, EnforcementManagementProps>(function EnforcementManagement({
                                                                                                 imageSrc = 'http://localhost:8085/static/images/执法管理背景图.png',
                                                                                                 label = '候车大厅',
                                                                                                 labelSen = 'XXXXX',
                                                                                                 componentWidth = 152,
                                                                                                 componentHeight = 56,
                                                                                                 labelFontSize = 14,
                                                                                                 labelColor = 'rgba(255,255,255,0.8)',
                                                                                                 sendlabelFontSize = 12,
                                                                                                 sendlabelColor = '#43AAFF',
                                                                                                 count = 125,
                                                                                                 countFontSize = 20,
                                                                                                 countColor = '#ffffff',
                                                                                                 onClick,
                                                                                                 style = {},
                                                                                                 className = '',
                                                                                                 __designMode,
                                                                                                 componentId,
                                                                                                 _componentName,
                                                                                                 forwardRef: forwardRefProp,
                                                                                                 ...otherProps
                                                                                               }, ref) {

  const handleClick = () => {
    onClick?.();
  };
  const containerStyle = {
    '--count-color': countColor,
    '--count-font-size': `${countFontSize}px`,
    ...style
  } as React.CSSProperties;
  return (
    <div
      ref={ref}
      className={`enforcement-management-com ${className}`.trim()}
      style={{
        ...containerStyle,
        width: `${componentWidth}px`,
        height: `${componentHeight}px`,
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
        backgroundImage: `url(${imageSrc})`,
        backgroundSize: 'cover',
        backgroundRepeat: 'no-repeat',
      }}
      onClick={handleClick}
      {...otherProps}
    >
      <div className="enforcement-management-com__labels">
        <span style={{fontSize: `${labelFontSize}px`, color: `${labelColor}`}}>{label}</span>
        <span style={{fontSize: `${sendlabelFontSize}px`, color: `${sendlabelColor}`}}>{labelSen}</span>
      </div>
      <div className="enforcement-management-com__count">
        <span>{count}</span>
      </div>
    </div>
  );
});

export default EnforcementManagement;
